<template>
	<component :is="currentView"></component>
</template>

<script>
	import router from './router'
	import RouterGenerator from './utils/RouterGenerator'

	import Guest from './views/layouts/Guest'
	import Backend from './views/layouts/Backend'

	import { mapGetters, mapState, mapActions } from 'vuex'

	export default {
		data() {
			return {
				currentView: 'guest'
			}
		},
		mounted() {

		},
		components: {
			guest: Guest,
			backend: Backend
		},
		computed: {
			...mapGetters([
				'menus',
			]),
			...mapState ({
				access_token: state => state.account.access_token
			})
		},
		methods: {
			/**
			 * 注册后台路由
			 */
			registerRouter () {
				let routers = [];
				//调用路由生成器
				RouterGenerator(routers, this.menus);
				//添加路由到/admin 路由的children
				router.options.routes[0].children = routers;
				//注册路由
				router.addRoutes(router.options.routes);
			},
			...mapActions([
				'fetchProfile'
			]),
		},
		watch: {
			/**
			 * 检测菜单和Access Token 状态
			 * @param value
			 */
			menus (value) {
				setTimeout(() => {
					if (value !== undefined && value.length > 0 && this.access_token) {
						this.currentView = 'backend'
					} else {
						this.currentView = 'guest'
					}
				}, 0);
			}
		},
		mounted () {
			if (this.menus !== undefined && this.menus.length > 0 && this.access_token) {
				this.currentView = 'backend';
				this.fetchProfile();
			} else {
				this.currentView = 'guest'
			}
		}
	}
</script>

<style lang="scss">
	.page {
		height: 100%;
	}
	@font-face {
		font-family: 'iconfont';
		src: url('../fonts/iconfont.eot');
		src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/iconfont.woff') format('woff'),
		url('../fonts/iconfont.ttf') format('truetype'),
		url('../fonts/iconfont.svg#iconfont') format('svg');
	}

	.iconfont{
		font-family:"iconfont" !important;
		font-size: 20px;
		font-style:normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}
</style>
